<!-- 辅导对象编辑或添加 -->
<template>
	<view class="content">
		<view class="main">
			<!-- 基本信息 第一个卡片-->
			<view class="card">
				<view class="card_head">
					<text>基本信息</text>
				</view>

				<view class="card_body">
					<view class="full-name">
						<text>姓名</text>
						<input placeholder="请输入姓名" v-model="infoList.counsellingName" />
					</view>
					<view @click="sexShow = true">
						<text>性别</text>
						<text
							:style="[{'color': infoList.sex == undefined ? '#808080' : ''}]">{{infoList.sex === undefined?'请选择性别':infoList.sex  }}</text>
					</view>

					<u-picker :show="sexShow" :columns="columns" @confirm="onConfirm"
						@cancel="sexShow = false"></u-picker>

					<view>

						<picker mode="date" header-text="选择时间" :value="infoList.counsellingBirth"
							@change="bindDateChange">
							<view class="be-born-time">
								<text>出生日期</text>
								<text
									:style="[{'color': infoList.counsellingBirth == undefined ? '#808080' : ''}]">{{infoList.counsellingBirth == undefined ? '请选择出生日期' : infoList.counsellingBirth}}</text>
							</view>
						</picker>
					</view>



					<view class="address">
						<text>地址</text>

						<view class="address-top">
							<picker mode="region" @change="getUserProvince">
								<view class="address_box">
									<text style="color: #808080;"
										v-if="infoList.counsellingAddress.length == 0">请选择省市县</text>
									<p style="font-size: 27rpx;" v-for="i in infoList.counsellingAddress"
										v-if="infoList.counsellingAddress.length != 0">{{i}}</p>
								</view>
							</picker>

							<input v-model="infoList.targetsDetailed" style="margin-top: 35rpx;min-width: 500rpx;"
								maxlength="20" placeholder="请输入详细地址" />
						</view>

					</view>
				</view>
			</view>


			<!-- 学习信息 -->
			<view class="card">
				<view class="card_head">
					<text style="color: #ef808d;">学习信息</text>
				</view>

				<view class="card_body">
					<view>
						<text>科目</text>
						<text v-if="!actives.fId == ''" @click="selectType">{{actives.fId}}
							{{actives.childLevel}}</text>

						<text v-if="actives.fId == ''" style="color: #808080;" @click="selectType">请选择科目</text>
					</view>
					<view class="Telephone">
						<text>联系电话</text>
						<input placeholder="请输入联系电话" v-model="infoList.counsellingTelephone" />

					</view>
					<view>
						<text>基本情况</text>
						<view class="basic-information">
							<textarea maxlength="300" class="textarea" placeholder-style="font-size: 27rpx;"
								placeholder="请输入基本情况" v-model="infoList.counsellingBasic"></textarea>
						</view>
					</view>
					<view class="basic-information-top">
						<text>备注</text>
						<!-- <input v-model="infoList.counsellingNotes" placeholder="请输入备注"/> -->
						<view class="basic-information">
							<textarea maxlength="300" class="textarea" placeholder-style="font-size: 27rpx;"
								placeholder="请输入备注" v-model="infoList.counsellingNotes"></textarea>
						</view>
					</view>
				</view>


			</view>
		</view>
		<view class="floor">
			<button @click="enterEdit">保存</button>
		</view>
		<!-- 科目 -->
		<u-popup :show="subjectShow" mode="bottom" @close="close">
			<view class="jh-h-p-90" style="height: 90vh;">
				<view class="jh-flex jh-justify-between jh-p-lr-40 jh-solid-b jh-l-h-100 jh-h-100">
					<text @click="subjectShow = false">取消</text>
					<text class="jh-text-bold-900">选择科目</text>
					<text class="jh-text-green" @click="yesButton('科目')">确定</text>
				</view>
				<view class="jh-flex jh-h-p-100">
					<!-- 学历 -->
					<view class="jh-h-p-100 jh-solid-r">
						<view v-for="(item,index) in educationData" :key="index"
							:class="educationDataType === index ? 'borderHighlight':'' "
							class=" jh-h-100 jh-w-p-100  jh-p-40 " @click="subjectL(item,index)">
							<text :class="educationDataType === index ? 'colorHighlight' : ''">{{item.dictLabel}}</text>
						</view>
					</view>
					<!-- 右边科目 -->
					<view class="r-subject jh-flex-1 jh-p-10">
						<view class="jh-flex jh-flex-wrap jh-justify-start jh-h-150-min">
							<view v-for="(item,i) in ziList" :key="i"
								class="jh-w-160 jh-h-60 jh-l-h-60 jh-p-lr-20 jh-text-center jh-text-24 jh-b-r-16 jh-solid  jh-m-20"
								:class="subjectType == i? 'backgroundHighlight':'backgroundLight'"
								@click="subjectRclick(item,i)">
								<text>{{item.dictLabel}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		log
	} from 'util'
	import {
		findTypeData,
		findFatherIdData,

	} from '../../api/family/index.js'
	import {
		targetsAdd,
		coachingTargets,
		targetsUpdate
	} from '../../api/my/index.js'
	export default {
		data() {
			return {
				// 科目颜色显示
				educationDataType: 0,
				//辅导对象信息数组
				infoList: {
					counsellingName: undefined,
					sex: undefined,
					counsellingBirth: undefined,
					counsellingAddress: [],
					targetsDetailed: undefined,
					subjectsDtos: undefined,
					counsellingTelephone: undefined,
					counsellingBasic: undefined,
					counsellingNotes: undefined,
				},
				columns: [
					[
						'男', '女'
					]
				],
				//性别选择弹出
				sexShow: false,
				subShow: false,
				kemuList: [],
				ziList: [],
				leftActive: '101',
				rightActive: '',
				actives: {
					fId: '',
					childLevel: ''
				},

				subjectData: [],
				// 科目显示
				subjectShow: false,
				// 科目右侧点击
				subjectType: 0,
				// 科目-学历
				educationData: [],



			}
		},
		methods: {
			// 科目显示
			selectType() {

				findTypeData({
					dictType: 'educ_subject'
				}).then(res => {

					this.educationData = res.data
					// this.kemuActiveFun(this.educationData[0])
					if (this.infoList.id == undefined) {
						this.kemuActiveFun(this.educationData[0])
					} else {
						for (let i = 0; i <= this.educationData.length - 1; i++) {
							if (this.educationData[i].dictLabel == this.actives.fId) {
								this.educationDataType = i
								this.kemuActiveFun(this.educationData[i], true)
							}
						}
					}
				})


				this.subjectShow = true
			},

			// 左侧科目学历选择
			subjectL(item, index) {

				this.subjectData = item.subject
				this.kemuActiveFun(item)
				this.educationDataType = index
			},
			// 科目子集更改
			kemuActiveFun(v, e) {
				console.log(e);

				findFatherIdData({
					fatherId: v.dictCode
				}).then(res => {
					this.ziList = res.data
					if (e === true) {
						console.log(this.ziList);
						for (let i = 0; i <= this.ziList.length - 1; i++) {
							console.log('11');
							if (this.ziList[i].dictLabel == this.actives.childLevel) {

								this.subjectType = i


							}
						}
					}
				})




			},
			// 右侧科目选择
			subjectRclick(item, index) {
				this.subjectType = index
			},
			// 科目确定 
			yesButton(txt) {
				this.subjectShow = false
				console.log(this.educationData[this.educationDataType].dictLabel)
				if (txt == '科目') {

					this.actives = {
						fId: this.educationData[this.educationDataType].dictLabel,
						childLevel: this.ziList[this.subjectType].dictLabel,
					}

				}

			},
			//弹窗关闭
			close() {
				this.subjectShow = false
				this.typesOfShow = false
				this.regionShow = false
				this.sexShow = false
			},



			entFun() {
				this.subShow = false;
			},

			// 选择男女
			onConfirm(e) {
				this.infoList.sex = e.value[0]
				console.log(e);
				this.sexShow = false
			},
			bindDateChange(e) {
				this.infoList.counsellingBirth = e.target.value
			},
			// 显示地址
			getUserProvince(e) {
				this.infoList.counsellingAddress = e.detail.value

			},
			voidSubShow() {
				this.rightActiveList = []
				this.subShow = false
			},
			enterEdit() {
				if (this.infoList.id == undefined) {
					if (this.actives.fId == '' || this.infoList.counsellingBirth == undefined ||
						!/^1[3456789]\d{9}$/.test(this.infoList.counsellingTelephone) || this.infoList.targetsDetailed ==
						undefined ||
						this.infoList.counsellingName == undefined && typeof this.infoList.counsellingName === 'string') {
						uni.showToast({
							title: '请检查重新输入',
							icon: 'none'
						});
					} else {

						targetsAdd({
							userId: uni.getStorageSync('openId'),
							targetsName: this.infoList.counsellingName,
							targetsTime: this.infoList.counsellingBirth,
							targetsSex: this.infoList.sex === '男' ? 0 : 1,
							targetsAddress: this.infoList.counsellingAddress.toString(),
							targetsDetailed: this.infoList.targetsDetailed,
							targetsPhone: parseInt(this.infoList.counsellingTelephone),
							targetsTua: this.infoList.counsellingBasic,
							targetsNotes: this.infoList.counsellingNotes,
							targetsIdDtoList: [{
								fId: this.educationDataType,
								leve: this.subjectType
							}]
						}).then(res => {
							console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: '添加成功',
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 1 // 返回的页面数，这里设置为1表示返回上一页
									});
								}, 1000)
							}
						})
					}
				} else {
					console.log(this.infoList.id);
					//修改
					targetsUpdate({
						id: this.infoList.id,

						targetsName: this.infoList.counsellingName,
						targetsTime: this.infoList.counsellingBirth,
						targetsSex: this.infoList.sex === '男' ? 0 : 1,
						targetsAddress: this.infoList.counsellingAddress.toString(),
						targetsDetailed: this.infoList.targetsDetailed,
						targetsPhone: parseInt(this.infoList.counsellingTelephone),
						targetsTua: this.infoList.counsellingBasic,
						targetsNotes: this.infoList.counsellingNotes,
						targetsIdDtoList: [{
							fId: this.educationDataType,
							leve: this.subjectType
						}]
					}).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
							});
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/wholeCounselling/wholeCounselling?id=' + this
										.infoList.id
								})
							}, 1000)
						}
					})
				}
			}
		},
		onLoad(info) {
			if (info.id) {
				coachingTargets({
					userId: uni.getStorageSync('openId'),
					id: info.id
				}).then(res => {
					console.log(res.rows[0]);
					this.infoList = {
						...res.rows[0],
						sex: res.rows[0].counsellingSex === 0 ? '男' : '女',

					}
					this.actives.fId = res.rows[0].subjectsDtos[0].name
					this.actives.childLevel = res.rows[0].subjectsDtos[0].subjectsDtos
				})

				findTypeData({
					dictType: 'educ_subject'
				}).then(res => {

					this.educationData = res.data
					// this.kemuActiveFun(this.educationData[0])
				})

				// findFatherIdData({
				// 	fatherId: v.dictCode
				// }).then(res => {
				// 	this.ziList = res.data
				// })

			} else {
				return
			}

			// uni.$http.get('educ/dictData/findTypeData', {
			// 	dictType: 'educ_subject'
			// }).then(res => {
			// 	this.kemuList = res.data.data
			// })

			// uni.$http.get('educ/dictData/findFatherIdData', {
			// 	fatherId: 101
			// }).then(res => {
			// 	this.ziList = res.data.data
			// })
		}
	}
</script>

<style scoped>
	.content {
		height: 100%;


	}

	.main {
		height: 87vh;
		overflow: scroll;
	}

	.left_active {
		color: #18c129;
		border-right: 5rpx solid #18c129;
	}

	.right_active {
		background-color: #18c129 !important;
		color: #fff;
	}

	.act {
		background-color: #18c129 !important;
		color: #fff;
	}

	.address_box {
		display: flex;
	}

	.address_box text {

		display: inline-block !important;
		min-width: none !important;
	}

	.popup_title {
		height: 100rpx;
		font-size: 27rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 25rpx;
		padding-top: 25rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #e9e9e9;
	}

	.popup_body {
		display: flex;
	}

	.popup_body_left {
		overflow: hidden;
		min-height: 1000rpx;
		width: 25%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		color: #999999;
		border-right: 2rpx solid #e9e9e9;
	}

	.popup_body_left>view {
		padding: 25rpx;
		text-align: center;
	}

	.popup_body_right {
		width: 100%;
		background-color: #f5f5f5;
	}

	.popup_body_right view {
		width: 100rpx;
		display: inline-block;
		background-color: #ffffff;
		border: 2rpx solid #d7d7d7;
		padding: 8rpx 25rpx;
		border-radius: 5rpx;
		margin: 15rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 35rpx;
		height: 35rpx;
	}

	/deep/.van-picker__confirm {
		color: #18c129;
	}

	/deep/.van-picker__cancel {
		color: #18c129;
	}

	input {
		font-size: 27rpx;
		min-width: 150rpx;

	}

	.content {
		background-color: #f7f7f7;
		min-height: 100vh;
		width: 100%;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.card {
		margin-top: 25rpx;
		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
	}

	.card_head {
		color: #ef808d;
		padding-top: 50rpx;
		padding-left: 25rpx;
	}

	.card_body {
		padding: 25rpx;
		line-height: 80rpx;
	}

	.card_body>view {
		display: flex;
		border-bottom: 2rpx solid #f2f2f2;
	}

	.card_body text {
		display: block;
		min-width: 170rpx;
		font-size: 27rpx;
	}

	.full-name {
		display: flex;
		align-items: center;
	}

	.be-born-time {
		display: flex;
		justify-content: center;
	}

	.address {
		border: none;
		display: flex;
		flex-direction: row;
		/* align-items: center; */
	}

	.address-top {
		display: flex;
		flex-direction: column;
	}

	.Telephone {
		display: flex;
		align-items: center;
	}

	.floor {
		width: 100%;
		box-sizing: border-box;
		margin-top: 25rpx;
	}

	.floor button {
		background-color: #04bc16;
		color: #fff;
	}

	.basic-information {
		width: 90%;
		line-height: 0;
		padding-top: 25rpx;
	}

	.basic-information-top {
		border: none;
		display: flex;
	}

	.textarea {
		width: 90%;
		font-size: 26rpx;
	}

	.borderHighlight {
		border-right: #04BC16 5rpx solid;
	}

	.colorHighlight {
		color: #04BC16;
		font-weight: 600;
	}

	.backgroundLight {
		background-color: white;
		color: black;
	}

	.backgroundHighlight {
		background-color: #04BC16;
		/* border-color: #04BC16; */
		color: white;
	}
</style>